<template>
<header class="header">
  <div class="music-top">
    <van-nav-bar
    left-text="推荐" >
      <template #right>
        <van-icon name="fire-o" size="18" color="#f40"/>
      </template>
      <input type="text" slot="title" placeholder="    正在热搜: 送给未来的你" class="soso"  @click="search" >
    </van-nav-bar>
  </div>
</header>
</template>

<script>
import Vue from 'vue'
import { NavBar } from 'vant'

Vue.use(NavBar)
export default {
  name: 'hunt',
  methods: {
    search () {
      console.log(this)
      this.$router.push('/search')
    }
  }
}
</script>

<style lang="scss" scoped>
  ::-webkit-input-placeholder {
     font-size: 0.13rem;
     color: rgba(255, 255, 255, 0.685);
  }
.soso{
  border: 0.1px solid #056948;
  background: #ccccccc7;
  border-radius: 0.2rem;
  margin-left: 0.1rem;
  height: 0.3rem;
}
  .music-top{
    // border: 1px solid black;
    position: absolute;
    top: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
      .van-nav-bar{
        width: 12rem;
        background: rgba(104, 77, 104, 0.267);
        /deep/.van-nav-bar__text{
          color: #ffcd32
        }
      }
  }
</style>
